<template>
  <div >
  <a-row :gutter="8">
    <a-col :sm="24" :md="12" :lg="8" :xxl="6" v-for="item in dataList" :key="item.id">
      <a-card style="height: 200px; overflow: hidden; margin-bottom: 12px;">
        <ych-icon class="app_i" :type="item.picture || 'file-zip'" />
        <div class="app_name">
          <p>{{item.name}}</p>
        </div>
        <div class="app_desc">
          <p>{{item.app_desc}}</p>
        </div>
        <div class="app_but">
          <div class="app_but_left">
            <a href="javascript:void(0);" @click="select(item)">{{$t('m.common.title.detail')}}</a>
          </div>
          <div>
            <a-popconfirm :title="(currentCodeList.indexOf(item.code) == -1 ? $t('m.eform.appmarket.other.confirm_install') : $t('m.eform.appmarket.other.confirm_update'))"
                          @confirm="() => doData(item)">
              <a href="javascript:void(0);">{{currentCodeList.indexOf(item.code) == -1 ?$t('m.eform.appmarket.other.install') : $t('m.eform.appmarket.other.update')}}</a>
            </a-popconfirm>
          </div>
        </div>
      </a-card>
    </a-col>
  </a-row>
  </div>
</template>

<script>

  export default {
    name: 'MarketList',
    props: {
      list: {
        type: Array,
        default: () => []
      },
      groupId: {
        type: String,
        default: null
      },
      currentCodeList: {
        type: Array,
        default: () => []
      }
    },
    computed: {
      dataList() {
        return this.list.filter(item => !this.groupId || item.group_id == this.groupId)
      }
    },
    data() {
      return {
      }
    },
    methods: {
      select(info) {
        this.$emit('select', info)
      },
      doData(info) {
        this.$emit('doData', info)
      }
    }
  }
</script>
<style lang="less" scoped>
  @import 'styles.css';
</style>
